<!-- 植物物种信息详情 -->
{% extends 'front/base.html' %}

{% block title %}
  {{ post.title }}
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('static',filename='front/css/post_detail.css') }}">
    <style>
    body {
      background-image: url('{{ url_for('static', filename='common/images/brown-.jpg') }}');
      background-size: cover; /* 让背景图片覆盖整个页面 */
      background-position: center; /* 让背景图片居中 */
      background-repeat: no-repeat; /* 防止背景图片重复 */
    }

    /* 您可以根据需要添加其他样式 */
    .content1-container {
      /* 假设您有一个容器来包裹表单内容，以防止背景图片影响表单的可读性 */
      background-color: rgba(255, 255, 255, 80); /* 半透明白色背景 */
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 70%;
      margin-right: 0 auto;
      margin-left: 0;
      float:left;
      padding-top: 20px;
      overflow: hidden;
    }

        form {

            //padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 500px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="datetime-local"],


        input[type="file"] {
            margin-bottom: 15px;
        }

      .comment-image {
            width: 200px; /* 设置图片宽度 */
            height: 200px; /* 设置图片高度 */
            object-fit: cover; /* 保持图片比例并覆盖容器 */
            border-radius: 10px; /* 设置圆角 */
        }

    </style>
{% endblock %}

{% block body %}
  <div class="lg-container">
    <div class="post-container">
      <h2>{{ post.name }}</h2>

<table style="border-collapse: collapse; width: 100%;">
    <tbody>
        <tr>
            <td style="border: 1px solid #ccc; padding: 8px;">拉丁名：</td>
            <td style="border: 1px solid #ccc; padding: 8px;">{{ post.name }}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ccc; padding: 8px;">门：</td>
            <td style="border: 1px solid #ccc; padding: 8px;">{{ post.phylum }}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ccc; padding: 8px;">科：</td>
            <td style="border: 1px solid #ccc; padding: 8px;">{{ post.family }}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ccc; padding: 8px;">属：</td>
            <td style="border: 1px solid #ccc; padding: 8px;">{{ post.genus }}</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ccc; padding: 8px;">描述：</td>
            <td style="border: 1px solid #ccc; padding: 8px;">{{ post.content }}</td>
        </tr>
    </tbody>
</table>


      <p class="post-info-group">
        <span>发表时间：{{ post.create_time }}</span>

        <span>所属分类：{{ post.board.name }}</span>
        <span>阅读数：{{ post.read_count }}</span>

      </p>
      <article class="post-content" id="post-content">
        {{ post.content|safe }}
      </article>
    </div>
    <div class="comment-group">
      <h3>记录列表</h3>
      <ul class="comment-list-group">
        {% for comment in comments %}
          <li>
            <div class="comment-content">
              <p class="author-info">

                <span>{{ comment.create_time }}</span>
              </p>
              <p class="comment-txt">
                {{ comment.content }}
              </p>
                <img class="comment-image" src="data:image/*;base64,{{ comment.image_base64 }}" alt="{{ comment.image_name }}">
            </div>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="add-comment-group">
      <h3>发布你发现的记录</h3>
      <form action="{{ url_for('front.public_comment',species_id=post.id) }}" method="post" enctype="multipart/form-data">
          <label for="place_found">发现地点：</label>
          <input type="text" id="place_found" name="place_found" required>

          <label for="create_time">发现时间：</label>
          <input type="datetime-local" id="create_time" name="create_time" required>

          <label for="image_data">图片：</label>
          <input type="file" id="image_data" name="image_data" accept="image/*" required>

          <textarea class="form-control" name="content" id="editor" cols="30" rows="5"></textarea>

          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% with messages = get_flashed_messages()  %}
          {% if messages %}
            {% for message in messages %}
              <div class="text-danger mt-2">{{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}
        <div class="comment-btn-group">
          <button class="btn btn-primary" id="comment-btn">发布（待审核）</button>
        </div>
      </form>
    </div>
  </div>
  <div class="sm-container"></div>
{% endblock %}